<template>
  <div id="home">
    <nav-bar class="homenav">
      <template #center> <h3>购物街</h3> </template>
    </nav-bar>
    <tab-control
      v-show="isfixed"
      class="fristtab"
      ref="tabsref1"
      :title="['新款', '热卖', '流行']"
      @mclick="changetabs"
    ></tab-control>
    <bs-croll
      class="wrapper"
      :offsettop="offsettop - 44"
      ref="homebs"
      :probeType="3"
      :pullupload="true"
      @pullloadmore="pullloadmore"
    >
      <Swiper :banners="banners" @imgload="imgload"></Swiper>
      <Recommend :recommends="recommends"></Recommend>
      <Feature></Feature>
      <tab-control v-show="!isfixed" ref="tabsref" :title="['新款', '热卖', '流行']" @mclick="changetabs"></tab-control>
      <goods-list :goods="goods[currenttype].list" v-if="goods[currenttype].list"></goods-list>
    </bs-croll>
    <back-top @totop="totop" v-show="isshowback"></back-top>
  </div>
</template>

<script>
import { reactive, ref, computed, onDeactivated, onActivated } from 'vue'

import NavBar from 'comps/common/navbar/NavBar.vue'
import Swiper from 'comps/common/swipe/Swiper.vue'
import Recommend from './childcomps/Recommend'
import Feature from './childcomps/Feature.vue'
import TabControl from 'comps/content/tabControl/TabControl.vue'
import GoodsList from 'comps/content/goods/GoodsList.vue'
import BsCroll from 'comps/common/bscroll/BsCroll.vue'
import BackTop from 'comps/content/backtop/BackTop.vue'

import { useBacktop } from '../../hooks/useBacktop'
import { gethomeMultdata, getHomegoods } from '../../server/home'
export default {
  components: {
    NavBar,
    Swiper,
    Recommend,
    Feature,
    TabControl,
    GoodsList,
    BsCroll,
    BackTop
  },
  setup(props) {
    const banners = ref([])
    const homebs = ref(null)
    const recommends = ref([])
    const tabsref = ref(null)
    const tabsref1 = ref(null)
    const offsettop = ref(0)
    const goods = reactive({
      pop: { page: 0, list: [] },
      new: { page: 0, list: [] },
      sell: { page: 0, list: [] }
    })
    const leaveY = ref(0)
    const currenttype = ref('pop')
    // 请求混合数据
    gethomeMultdata().then((res) => {
      banners.value = res.data.banner.list
      recommends.value = res.data.recommend.list
    })
    // 请求goods数据
    const getgoodsdata = (type) => {
      const page = goods[type].page + 1
      getHomegoods(type, page)
        .then((res) => {
          goods[type].list = [...goods[type].list, ...res.data.list]
          goods[type].page = goods[type].page + 1
        })
        .catch((err) => err)
    }
    getgoodsdata('pop')
    getgoodsdata('new')
    getgoodsdata('sell')
    // 修改当前展示tab
    const changetabs = (type) => {
      currenttype.value = type
      // 保证对应的type相同
      if (type === 'pop') {
        tabsref.value.currentindex = 0
        tabsref1.value.currentindex = 0
      } else if (type === 'new') {
        tabsref.value.currentindex = 1
        tabsref1.value.currentindex = 1
      } else {
        tabsref.value.currentindex = 2
        tabsref1.value.currentindex = 2
      }
    }
    // 处理回到顶部
    const { totop, isshowback } = useBacktop(homebs)
    const isfixed = computed(() => {
      return homebs.value?.isfixed
    })
    // 下拉加载更多
    const pullloadmore = () => {
      getgoodsdata(currenttype.value)
      homebs.value.scorll.finishPullUp()
    }
    // 获取tab-control 的offsettop
    const imgload = () => {
      offsettop.value = tabsref.value.$el.offsetTop
    }
    // 离开home页面保存离开的位置
    onDeactivated(() => {
      leaveY.value = homebs.value.scorll.y
    })
    // 回来时设置回去Y
    onActivated(() => {
      homebs.value.scorll?.refresh()
      homebs.value.scorll?.scrollTo(0, leaveY.value, 0)
    })
    return {
      banners,
      recommends,
      goods,
      currenttype,
      homebs,
      offsettop,
      tabsref,
      tabsref1,
      isfixed,
      isshowback,
      changetabs,
      totop,
      pullloadmore,
      imgload
    }
  }
}
</script>

<style lang="less" scoped>
@color: #fff;
#home {
  padding-top: 44px;
}
.homenav {
  background-color: var(--color-tint);
  color: @color;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 9999;
}
.wrapper {
  height: calc(100vh - 44px - 49px);
  overflow: hidden;
}
</style>
